import React, { Component } from 'react'
import { adminRoutes } from './routes'
import {Route, Switch, Redirect} from 'react-router-dom'
import { Frame } from './components'
import { connect } from 'react-redux'
import 'antd/dist/antd.css'

 class App extends Component {
    render() {
        return (
            this.props.isLogin
               ?<Frame>
                <Switch>
                        {
                            adminRoutes.map((item) => {
                                return <Route path={item.pathname} exact={item.exact} key={item.pathname} render={(routeProps)=>{
                                    const hasPermission = item.roles.includes(this.props.role)
                                    return hasPermission? <item.component {...routeProps} />: <Redirect to='/admin/noauth' />
                                }} />
                            })
                        }
                        <Redirect to={adminRoutes[0].pathname} exact from='/admin'/>
                        <Redirect to='/404' />
                    </Switch>
               </Frame>: <Redirect to='/login' />
               
        )
    }
}

const mapState = state => ({
    isLogin: state.user.isLogin,
    role: state.user.role
})

export default connect(mapState)(App)